
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Accordion Tools - jQuery EasyUI Demo</title>
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="js/watch.js"></script>
	<style>


	</style>
</head>
<body>
	
	<ul>
		<li>
			<a href="javascript:void(0)" onClick="dataOne()">
				将obj b属性改变
			</a>
		</li>
		<li>
			<a href="javascript:void(0)" onClick="dataTwo()">
				将obj a属性的dd属性的ddd属性改变
			</a>
		</li>
		<li>
			<a href="javascript:void(0)" onClick="dataThree()">
				将obj a属性的g属性数组第一个值的a属性改变
			</a>
		</li>
		<li>
			<a href="javascript:void(0)" onClick="dataFour()">
				将obj a属性的g属性数组push新的值
			</a>
		</li>
	</ul>
	
	<div id="path">
	</div>
	<div id="old-val">
	</div>
	<div id="new-val">
	</div>

</body>
<script>
    var obj = {
        a: {e: 4, f: 5, g: [{a: 1, b: 2}, [3, 4]], dd: {ddd: 1}},
        b: 2,
        c: 3
    };

	new Watch(obj, call);
	new Watch(obj, function(path, newVal, oldVal){
		console.log("我也监听了："+newVal+"--"+oldVal);
	});
    function call(path, newVal, oldVal) {
        document.getElementById('path').innerHTML='路径:'+path;
        document.getElementById('old-val').innerHTML='新的值:'+newVal;
        document.getElementById('new-val').innerHTML='老的值:'+oldVal;
    }

    function dataOne() {
        obj.b = Math.floor(Math.random()*10);
    }

    function dataTwo() {
        obj.a.dd.ddd = Math.floor(Math.random()*10);
    }

    function dataThree() {
        obj.a.g[0].a=Math.floor(Math.random()*10);
    }

    function dataFour() {
        obj.a.g.push(Math.floor(Math.random()*10));
    }
</script>
</html>
